<template>
<view>
<!--pages/minePage/minePage.wxml-->
<!--<import src="template.wxml"></import>-->

<view class="loginHeader">
     <image :src="userHead" class="userHead" mode="aspectFill" @tap="previewHead"></image>
		 <button v-if="!isLoginSuccess" class="userTitle"  shape="circle" open-type="getUserInfo" @getuserinfo="loginTap">{{userTitle}}</button>
     <view v-else style="display: flex;justify-content: space-between;">{{userTitle}}</view>
		 <button class="userTitle" shape="circle" style="margin-left: 0;" @click="applyBusiness">申请商家</button>
</view>

<view class="order">
     <view class="item" @tap="allOrderTap">
          <image src="/static/res/images/ic_order_all.png" mode="widthFix" class="icon"></image>
          <text class="text">全部订单</text>
     </view>
     <view class="vercialLine">
     </view>
     <view class="item" @tap="todoOrderTap">
          <image src="/static/res/images/ic_order_book.png" mode="widthFix" class="icon"></image>
          <text class="text">待入住订单</text>
     </view>
</view>

<block data-type="template" data-is="settingItem" data-attr="caption:'我的会员',value:'游客',needIcon:false">
     <view class="settingItem">
          <text class="caption">{{'我的会员'}}</text>
          <text class="value">{{userInfo.member}}</text>
     </view>
</block>
<block data-type="template" data-is="settingItem" data-attr="caption:'我的积分',value:'0积分',needIcon:false">
     <view class="settingItem">
          <text class="caption">{{'我的积分'}}</text>
          <text class="value">{{`${userInfo.integral}积分`}}</text>
     </view>
</block>
<!-- <block data-type="template" data-is="settingItem" data-attr="caption:'我的优惠券',value:'3张',needIcon:true">
     <view class="settingItem">
          <text class="caption">{{'我的优惠券'}}</text>
          <text class="value">{{'3张'}}</text>
          <image v-if="true" src="/static/res/images/ic_right_arrow.png" mode="widthFix" class="icon"></image>
     </view>
</block> -->
</view>
</template>

<script>
// pages/minePage/minePage.js
var app = getApp();

export default {
  data() {
    return {
      userTitle: '点击登录',
      userHead: "/static/res/images/ic_mine_normal.png",
			isLoginSuccess: false,
			userInfo:{
				member:'游客',
				integral:0
			}
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {// this.initLoginMsg();
  },
	
  methods: {
    previewHead: function () {
      uni.previewImage({
        current: this.userHead,
        urls: [this.userHead]
      });
    },
    loginTap: function (e) {
      var that = this;
      if (!this.isLoginSuccess) {
        uni.showLoading({
          title: '正在登录...'
        }); // 登录

        uni.login({
        	provider: 'weixin',
        	success: login => {
        		uniCloud.callFunction({
        			name: 'login',
        			data: {
        				userInfo: e.detail.userInfo,
        				code: login.code
        			},
        			success: res => {
        				console.log(res.result.data)
								app.globalData.userInfo = res.result.data
								console.log(app.globalData.userInfo)
        				if (res.result.code != 0) {
        					return         
        				}
								
								that.initLoginMsg();
        			},
        			complete: () => {
        				uni.hideLoading()
        			}
        		})
        	},
        	fail: () => {
						this.isLoginSuccess = false;
						that.setData({
						  userTitle: '点击登录',
						  userHead: "/static/res/images/ic_mine_normal.png"
						});
        	}
        }) // 获取用户信息 
      }
    },
		// 申请商家
		applyBusiness(){
			console.log(123)
			uni.navigateTo({
				url:'../../pages/applyBusiness/applyBusiness'
			})
		},
    initLoginMsg: function () {
      if (app.globalData.userInfo) {
        this.isLoginSuccess = true;
        this.setData({
          userHead: app.globalData.userInfo.avatarUrl,
          userTitle: '尊贵的，' + app.globalData.userInfo.nickname,
					userInfo:{
						member:app.globalData.userInfo.member === 0 ? "普通会员" : "VIP会员",
						integral:app.globalData.userInfo.integral
					}
        });
      } else if (this.canIUse) {
        // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        this.isLoginSuccess = true;

        app.globalData.userInfoReadyCallback = res => {
          this.setData({
            userHead: res.userInfo.avatarUrl,
            userTitle: '尊贵的，' + res.userInfo.nickname
          });
        };
      } else {
        // 在没有 open-type=getUserInfo 版本的兼容处理
        uni.getUserInfo({
          success: res => {
            this.isLoginSuccess = true;
            app.globalData.userInfo = res.userInfo;
            this.setData({
              userHead: res.userInfo.avatarUrl,
              userTitle: '尊贵的，' + res.userInfo.nickname
            });
          },

          fail() {
            this.isLoginSuccess = false;
            this.setData({
              userTitle: '点击登录',
              userHead: "/static/res/images/ic_mine_normal.png"
            });
          }

        });
      }
    },
    allOrderTap: function () {
			const memberId = app.globalData.userInfo.openid
			if(!memberId){
				uni.showModal({
				    title: '提示',
				    content: '请先授权登录',
				    success: (res)=> {
				        if (res.confirm) {
				           uni.switchTab({
				               url: '/pages/minePage/minePage'
				           });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}else{
				uni.navigateTo({
				  url: '../orderList/orderList?type=all'
				});
			}
      
    },
    todoOrderTap: function () {
			const memberId = app.globalData.userInfo.openid
			if(!memberId){
				uni.showModal({
				    title: '提示',
				    content: '请先授权登录',
				    success: (res)=> {
				        if (res.confirm) {
				           uni.switchTab({
				               url: '/pages/minePage/minePage'
				           });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}else{
				uni.navigateTo({
				  url: '../orderList/orderList?type=todo'
				});
			}
    }
  }
};
</script>
<style>
/* pages/minePage/minePage.wxss */

Page {
     width: 100%;
     height: 100%;
     background: #f2f2f2;
     display: flex;
     flex-direction: column;
}

.loginHeader {
     width: 100%;
     box-sizing: border-box;
     padding: 16rpx 30rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
     background: white;
}

.userHead {
     width: 70rpx;
     height: 70rpx;
     margin: 20rpx;
     border-radius: 50%;
}

.userTitle {
     margin-left: 16rpx;
     font-size: 30rpx;
     color: #333;
}

.order {
     width: 100%;
     height: max-content;
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
     padding: 32rpx 0;
     margin: 20rpx 0;
     background: white;
}

.order .item {
     display: flex;
     flex-direction: row;
     flex: 1;
     justify-content: center;
     align-items: center;
}

.order .item .icon {
     width: 40rpx;
}

.order .item .text {
     margin-left: 16rpx;
     font-size: 30rpx;
     color: #333;
}

.settingItem {
     display: flex;
     width: 100%;
     box-sizing: border-box;
     flex-direction: row;
     background: white;
     border-bottom: #dedede solid 1px;
     padding: 22rpx 26rpx;
     align-items: center;
}

.settingItem .caption, .settingItem .value {
     font-size: 30rpx;
     color: #333;
}

.settingItem .value {
     flex: 1;
     text-align: right;
}

.settingItem .icon {
     width: 28rpx;
     margin-left: 10rpx;
}

</style>